<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>视频播放</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style media="screen">
        html,
        body {
            height: 100%;
            position: absolute;
            background-color: #000000;
        }

        .aui-bar-nav {
            /*padding: 0 11px 0 13px;
    box-sizing: border-box;*/
            top: 0;
            line-height: 2.25rem;
            background-color: #000000;
        }

        .aui-bar-nav .aui-btn .aui-iconfont {
            font-size: 0.9rem;
            line-height: 1.25rem;
            padding: 0;
            margin: 0;
            color: #000000;
        }

        .aui-bar-nav .aui-title {
            min-height: 2.25rem;
            position: absolute;
            margin: 0;
            text-align: center;
            white-space: nowrap;
            right: 5rem;
            left: 5rem;
            width: auto;
            overflow: hidden;
            text-overflow: ellipsis;
            z-index: 2;
            color: #333333;
            font-size: 17px;
            font-weight: bolder;
        }

        .aui-btn span {
            width: 22px;
            height: 22px;
        }

        .aui-btn span img {
            width: 22px;
            height: 22px;
        }

        .aui-bar-nav .aui-pull-right {
            padding: 0 11px;
            font-size: 0.8rem;
            font-weight: 400;
            z-index: 2;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center;
        }

        button,
        .aui-btn {
            position: relative;
            display: inline-block;
            font-size: 0.7rem;
            font-weight: 400;
            font-family: inherit;
            text-decoration: none;
            text-align: center;
            margin: 0;
            background: #EEEEEE;
            padding: 0 15px!important;
            height: 1.5rem;
            line-height: 1.5rem;
            border-radius: 0.2rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            vertical-align: middle;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-user-select: none;
            user-select: none;
        }

        .aui-pull-right {
            font-size: 15px;
            color: #222222!important;
            text-align: right;
        }

        .content_t {
            width: 100%;
            height: 115px;
            margin-top:600px;
        }

        .title {
            width: auto;
            height: 25px;
            background: #333333;
            border-radius: 0px 2px 2px 0px;
            display: flex;
            margin-top: 78px;
        }

        .title .icon {
            width: 20px;
            height: 20px;
            margin-top: 2.5px;
            margin-left: 15px;
        }

        .title .icon img{
          display: block;
          width: 100%;
          height: 100%;
        }

        .title .text {
            width: auto;
            /*height: 23px;*/
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 25px;
        }

        .intro {
            width: 100%;
            padding-left: 15px;
            box-sizing: border-box;
            height: 28px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 28px;
            margin-top: 19px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- <header class="aui-bar aui-bar-nav" id="header">
            <a class="aui-pull-left aui-btn" tapmode @click="closeWin()">
                <span>
                   <img src="../../image/white_back.png" alt="">
                </span>
            </a>
        </header>
        <div class="content_t">
        </div> -->
        <div class="content_t">
            <div class="title" @click='openGoodsDtailsPage()'>
                <div class="icon"><img src="../../image/cart_icon.png" alt=""></div>
                <div class="text">{{title}}</div>
            </div>
            <div class="intro">{{dyVideoTitle}}</div>
        </div>

    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/cling.js"></script>
<script type="text/javascript">
    apiready = function() {

        vm.playVideo(api.pageParam.dyVideoUrl);
        vm.title = api.pageParam.itemshorttitle;
        vm.dyVideoTitle = api.pageParam.dyVideoTitle;
        api.addEventListener({
            name: 'backpage'
        }, function(ret, err){
            if( ret ){
              var videoPlayer = api.require('videoPlayer');
              videoPlayer.start();
            }
        });


    };

    var vm = new Vue({
        el: "#app",
        data: {
           title:'',
           dyVideoTitle:''
        },
        methods: {
          openGoodsDtailsPage: function() {
            var videoPlayer = api.require('videoPlayer');
            videoPlayer.pause();
              cl.openWin({
                  name: 'goods_deatils',
                  pageParam: {
                      id:api.pageParam.itemid
                  }
              })
          },
            /**
             * [播放视屏]
             * @return {[type]} [description]
             */
            playVideo: function(path) {
                var videoPlayer = api.require('videoPlayer');
                // $api.fixStatusBar($api.byId('header'));
                var heights = $api.byId("app").offsetHeight
                if (api.systemType == 'ios') {
                    var rect = {
                        x: 0,
                        y: 0,
                        w: api.winWidth,
                        h: 600
                    }
                } else {
                    var rect = {
                        x: 0,
                        y: 0,
                        w: api.winWidth,
                        h:600
                    }
                }
                videoPlayer.openPlay({
                    rect: rect,
                    styles: {
                        head: { //（可选项）JSON对象；播放器顶部导航条样式
                            bg: 'rgba(0.5,0.5,0.5)', //（可选项）字符串类型；顶部导航条背景，支持#、rgb、rgba、img；默认：rgba(161,161,161,0.5)
                            height: 44, //（可选项）数字类型；顶部导航条的高；默认：44
                            y: 0, // (可选项）数字类型；距离模块顶部的距离；默认：20(仅支持iOS)
                            // titleSize: 14, //（可选项）数字类型；顶部标题字体大小；默认：20
                            titleColor: '#000', //（可选项）字符串类型；顶部标题字体颜色；默认：#fff
                            backSize:30, //（可选项）数字类型；顶部返回按钮大小；默认：44
                            backImg: 'widget://image/white_back.png'
                        },
                        foot: { //（可选项）JSON对象；播放器底部导航条样式
                            bg: 'rgba(0,0,0,0.2)', //（可选项）字符串类型；底部导航条背景，支持#、rgb、rgba、img；默认：rgba(161,161,161,0.5)
                            height: 44, //（可选项）数字类型；底部导航条的高；默认：44
                            playSize: 20, //（可选项）数字类型；底部播放/暂停按钮大小；默认：44
                            playImg: 'widget://image/vidoe_start.png', //（可选项）字符串类型；底部播放按钮的背景图片，要求本地路径（widget://、fs://）；默认：播放按钮图标
                            pauseImg: 'widget://image/time_out.png', //（可选项）字符串类型；底部暂停按钮的背景图片，要求本地路径（widget://、fs://）；默认：暂停按钮图标
                            timeSize: 14, //（可选项）数字类型；底部时间标签大小；默认：14
                            timeColor: '#fff', //（可选项）字符串类型；底部时间标签颜色，支持#、rgba、rgb；默认：#fff
                            sliderImg: 'widget://image/slider.png', //（可选项）字符串类型；底部进度条滑块背景图片，要求本地路径（widget://、fs://）；默认：滑块小图标(在iOS上需要添加二倍图或者三倍图,否则会出现毛边)
                            progressColor: '#696969', //（可选项）字符串类型；进度条背景色，支持#、rgba、rgb；默认：#696969
                            progressSelected: '#76EE00', //（可选项）字符串类型；滑动后的进度条背景色，支持#、rgb、rgba；默认：#76EE00
                            rotationSize: 20, //（可选项）数字类型；底部横屏/竖屏按钮大小；默认：foot的高度
                            verticalImg: 'widget://image/full_screen.png', //（可选项）字符串类型；底部横竖屏切换按钮的背景图片，竖屏状态下的切换按钮，要求本地路径（widget://、fs://）；默认：竖屏按钮图标
                            horizontalImg: 'widget://image/full_screen.png', //（可选项）字符串类型；底部横竖屏切换按钮的背景图片，横屏状态下的切换按钮，要求本地路径（widget://、fs://）；默认：横屏按钮图标

                        }
                    },
                    path:path, //（可选项）字符串类型；文档的路径，支持网络和本地（fs://）路径；默认：未传值时不播放
                    //在 android 平台上不支持 widget://
                    autorotation: true,
                    useGestureControl: true,
                    fixed: false,
                    fixedOn: api.frameName,
                    autoPlay: true //（可选项）布尔类型；打开时是否自动播放；默认：true（自动播放）
                }, function(ret, err) {
                    console.log(JSON.stringify(ret))
                    if (ret) {
                        if (ret.eventType == 'show') {
                            api.setStatusBarStyle({
                                style: 'light'
                            });
                        }
                        if (ret.eventType == 'back') {
                            cl.closeWin({
                                name: 'video_play'
                            })
                        }
                    } else {
                        console.log(JSON.stringify(err));
                    }
                });
            },
        }
    })
</script>

</html>
